<template>
    <div class="layout">
        <div class="container">
            <div class="header">学生基本信息</div>
            <div class="item">
                <span class="label">学生</span>
                <span class="value"> {{ info.name }} </span>
            </div>
            <div class="item">
                <span class="label">学号</span>
                <span class="value"> {{ info.stuNum }} </span>
            </div>
            <div class="item">
                <span class="label">班主任</span>
                <span class="value"> {{ info.headTeacherName }} </span>
            </div>
            <div class="item">
                <span class="label">班级</span>
                <span class="value"> {{ info.className }} </span>
            </div>
            <div class="item">
                <span class="label">性别</span>
                <span class="value" v-if="info.gander === 1"> 男 </span>
                <span class="value" v-else> 女 </span>
            </div>
            <div class="item">
                <span class="label">手机号</span>
                <span class="value"> {{ info.phone }} </span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reqGetInfo } from '@/api/parent/index';
import { ref, onMounted } from 'vue';
import { useParentStore } from '@/stores/modules/parentStore';

const info = ref({});
const parentStore = useParentStore();

const getInfo = async num => {
    try {
        const res = await reqGetInfo(num);
        if (res.status === '200') {
            info.value = res.data;
        }
    } catch (error) {}
};

onMounted(() => {
    getInfo(parentStore.studentNum);
});
</script>

<style scoped lang="scss">
.layout {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: start;
    flex-direction: column;
    align-items: center;
    background-color: #f7f7f7;
    .container {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        width: 100%;
        .header {
            width: 100%;
            height: 5vh;
            background: #3095ff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20rem;
            color: #fff;
            font-weight: bold;
        }
        .item {
            width: 90%;
            height: 4vh;
            color: #666;
            font-size: 16rem;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #eee;
            margin-top: 10rem;
        }
    }
}
</style>
